import React, { Suspense } from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'

const Home = React.lazy(() => import('../views/home'))
const Login = React.lazy(() => import('../views/login'))
const Two = React.lazy(() => import('../views/two'))
const One = React.lazy(() => import('../views/one'))

const RoutesList = [{
  path: '/home',
  element: <Home></Home>
}, {
  path: '/login',
  element: <Login></Login>
}, {
  path: '/one',
  element: <One></One>,
  children: [{
    path: '/one/two',
    element: <Two></Two>
  }]
}]

const Router = () => {
  // 路由渲染
  return (<>
    <Suspense fallback={'页面加载中...'}>
      <Routes>
        {/* 方式一 */}
        {/* <Route path="/home" element={<Home></Home>}></Route>
        <Route path="/login" element={<Login></Login>}></Route>
        <Route path="/one" element={<One></One>}>
          <Route path="/one/two" element={<Two></Two>}></Route>
        </Route> */}
        {/* 方式二 */}
        {
          RoutesList.map((item, index) => {
            return <Route key={index} path={item.path} element={item.element}>
              {item.children && item.children.map(
                (item, index) => <Route key={index}
                  path={item.path}
                  element={item.element}
                />)}
            </Route>
          })
        }
      </Routes>
    </Suspense>
  </>
  )
}

export default Router